<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18">
                <el-card style="height: calc(100vh - 108px);">
                    <el-calendar v-model="date">
                        <template slot="dateCell" slot-scope="{date, data}">
                            <div>
                                <span :class="data.isSelected ? 'is-selected' : ''">
                                    {{ data.day.split('-').slice(2).join('-') }}
                                </span>

                                <div class="holiday">
                                    <p>上班时间: 09:00</p>
                                    <p>下班时间: 16:00</p>
                                </div>
                            </div>
                        </template>
                    </el-calendar>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="height: calc(100vh - 108px);">
                    <div style="display: flex;flex-direction: column;">
                        <div class="date">
                            <p style="margin-bottom: 10px;">2025年3月</p>
                            <p style="margin-bottom: 10px;"> 周一</p>
                            <p style="font-size: 32px;">18</p>
                        </div>

                        <div style="margin-top: 20px;">
                            <el-form label-width="120px">
                                <el-form-item label="姓名: ">何俊东</el-form-item>
                                <el-form-item label="出勤/天: ">22</el-form-item>
                                <el-form-item label="请假/天: ">12</el-form-item>
                                <el-form-item label="矿工/次: ">22</el-form-item>
                                <el-form-item label="迟到/次: ">12</el-form-item>
                                <el-form-item label="缺卡/次: ">12</el-form-item>
                                <el-form-item label="加班/天: ">12</el-form-item>
                                <el-form-item label="加班/h: ">5</el-form-item>
                                <el-form-item label="餐补/元: ">100</el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import moment from 'moment';

export default {
    data() {
        return {
            date: new Date(),
        };
    },
};
</script>

<style scoped>
.holiday {
    color: #666;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.date {
    width: 50%;
    height: 150px;
    background-color: fff;
    border: 1px dashed #666;
    /* 设置虚线 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    flex-direction: column;
    margin: 0 auto;
}

.date p {
    margin: 0;
}
</style>